<template>
	<div class="main-header" :class="{'transparent':transparent,'fixed':isFixed}" >
		<view class="status-bar" :style="{height:getStateHeight + 'px'}"></view>
		<view class="main-line" :style="{'height':getNavbar+'px',lineHeight:getNavbar+'px'}">
			<slot name="navbar"></slot>
			<view class="main-line-icon" :style="{height:getNavbar + 'px'}" v-if="isBack" @click="backClick()">
				<van-icon name="arrow-left" size="20" :color="titleColor" />
			</view>
			<view class="main-line-title" :style="{color:titleColor}">
				{{title}}
			</view>
		</view>
		<slot></slot>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		name:"navbar",
		props:{
			isBack:{
				type:Boolean,
				default(){
					return true
				}
			},
			title:{
				type:String,
				default(){
					return ""
				}
			},
			backFunc:{
				type:Function,
				default(){
					return null;
				}
			},
			transparent:{
				type:Boolean,
				default(){
					return false;
				}
			},
			isFixed:{
				type:Boolean,
				default(){
					return true;
				}
			},
			titleColor:{
				type:String,
				default(){
					return "#000"
				}
			}
		},
		data() {
			return {
				bottomBtnHeight: uni.upx2px(140),
			};
		},
		methods:{
			backClick(){
				if(!this.backFunc) {
					uni.navigateBack();
					return;
				};
				this.backFunc();
			}
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
		}
	}
</script>

<style scoped lang="less">
.main{
	&-header {
		width: 100%;
		background: linear-gradient(to bottom, #bfcefb, #c8d4f9);
		&.transparent{
			background: unset;
		}
		&.fixed{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
		}
	}
	
	&-line {
		display: flex;
		position: relative;
		width: 100%;
	
		&-title {
			text-align: center;
			font-size: 38upx;
			color: #000;
			width: 100%;
		}
	
		&-icon {
			position: absolute;
			left: 45upx;
			display: flex;
			align-items: center;
		}
	}
}
</style>